<template>
  <div class="projectContent"  @click.prevent="cancelClick()">
  <div class="projectList">
    <div class="project"  @click.stop="Checked(index,item)" @dblclick.stop="$router.push(item.router)" v-for="(item, index) in list" :key="index" :id="ownClass(index)">
      <img :src="item.imgPath" />
      <span :title="item.title">{{ item.title }}</span>
    </div>
  </div>
  <transition name="info">
  <div class="projectInfo" v-if="infoShow" @click.stop="stopClick()">
    <p class="title">{{clickList.title}}</p>

    <el-collapse v-model="activeNames">
  <el-collapse-item title="预览" name="1">
        <el-image 
    style="width: 100%"
    :src="clickList.infoImage" 
  >
  </el-image>
  </el-collapse-item>
  <el-collapse-item title="时间" name="2">
    <p class="conetent">{{clickList.time}}</p>
  </el-collapse-item>
  <el-collapse-item title="项目介绍" name="3">
    <p class="conetent">{{clickList.info}}</p>
  </el-collapse-item>
  <el-collapse-item title="工作" name="4">
    <p class="conetent">{{clickList.work}}</p>
  </el-collapse-item>
</el-collapse>
  </div>
</transition>
</div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      activeNames:['1'],
      chooseCorrect:false,
      infoShow:false,
      clickList:{},
      list:[
        {
          imgPath:require("../../../static/image/st.svg"),
          title:'地铁设备全生命周期管理系统',
          infoImage:require("../../../static/image/数据大屏.png"),
          time:'2020.10--2021.10',
          info:'通过对机电设备进行参数监测，结合对人员存在情况进行监测，按照不同的工况，运用合理的算法，全系统联动控制，实现综合节能。',
          work:'数据大屏以及所有页面的前端设计以及实现。',
          router:'/DE'
        }
      ]
    };
  },
  watch: {},
  computed: {},
  methods: {
    stopClick(){},
    cancelClick(){ // 对失去焦点的监听
      var domList = document.getElementsByClassName('project')
      domList.forEach(item=>{
        item.style = 'border:0px'
      })
      this.infoShow = false

    },
    Checked(index,item){
      this.clickList = item
      // this.chooseCorrect = !this.chooseCorrect;
      var domList = document.getElementsByClassName('project')
      domList.forEach(item=>{
        item.style = 'border:0px'
      })
      var id = `project-${index}`
      var dom = document.getElementById(id)
      dom.style='border: solid 1px rgba(148, 148, 148,.5);'
      this.infoShow = true
      console.log(domList);
    },
    ownClass(index){
      return `project-${index}`
    }
  },
  created() {},
  mounted() {}
};
</script>
<style scoped>
.projectList{
  display: flex;
  padding: 20px;
}
.project {
  height: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20px;
  padding: 5px;
}
.project img {
  width: 35px;
}

.project span {
  font-size: 12px;
  height: 50px;
  width: 100px;
  overflow: hidden;
  verflow:hidden;
  display: inline-block;
  white-space: nowrap;
  text-overflow:ellipsis;
}
.project span:after{content:"...";}
.oneChecked{
  background-color: #000;
}
.projectContent{
  width: 100%;
    height: 100%;
    overflow: hidden;
}
.projectInfo{
  width: 500px;
  height: calc(100% - 43px);
  position: relative;
  float: right;
  border-left: solid 1px rgba(148, 148, 148,.5);
  transform: translateY(-100px);
  padding: 20px;
  overflow: auto;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%)
}
.pjectInfo img{
  width: 100%;
}
@keyframes axisX {
  from {
    transform: translateY(-100px) translateX(100%);
    
  }
  to {
    transform:  translateY(-100px) translateX(0px);
  }
}

.info-enter-active {
  animation: axisX 1s;
  animation-timing-function:'linear'
}
/* 结束 */
.info-leave-active {
  animation: axisX 1s  reverse;
  animation-timing-function:'linear'

}
.title{
  text-align: center;
  font-size: 22px;
}
</style>